// webpack的配置文件
const path = require('path')

module.exports = {
    // 1.入口
    entry: './src/index.js',// 告诉webpack从这个文件开始打包

    // 2.输出
    output: {
        // __dirname 返回当前配置文件所在目录的绝对路径
        path: path.join(__dirname,'dist'),// 告诉webpack打包后文件的存储目录(绝对路径)
        filename: 'main.js'// 告诉webpack打包后文件的名称
    },

    // 3.加载器
    module: {
        rules: [
            // loader的配置
            {
                // 匹配.css结尾的资源
                test: /\.css$/,
                // 匹配到css资源时，先使用css-loader，再使用style-loader来处理css资源
                use: ["style-loader","css-loader"] // 从右到左执行
            },
            {
                // 匹配.less结尾的资源
                test: /\.less$/,
                // 匹配到less资源时，先使用less-loader编译成css，再使用css-loader和style-loader来处理css资源
                use: ["style-loader","css-loader","less-loader"] // 从右到左执行
            },
            {
                // 匹配.scss结尾的资源
                test: /\.scss$/,
                // 匹配到sass资源时，先使用sass-loader编译成css，再使用css-loader和style-loader来处理css资源
                use: ["style-loader","css-loader","sass-loader"] // 从右到左执行
            },
            {
                // 匹配.styl结尾的资源
                test: /\.styl$/,
                // 匹配到stylus资源时，先使用stylus-loader编译成css，再使用css-loader和style-loader来处理css资源
                use: ["style-loader","css-loader","stylus-loader"] // 从右到左执行
            },
            {
                // 匹配图片资源
                test: /\.(png|jpe?g|gif|svg)/,
                // 资源模块类型
                type: "asset",// 相当于使用了file-loader和url-loader
                parser: {
                    // 设置图片小于10kb时，将图片转成base64编码
                    dataUrlCondition: {
                        // 优点：减少图片数量，减少请求服务器次数
                        // 缺点：图片体积变大 8.04kb -> 8.2kb
                        maxSize: 1024 * 10
                    }
                },
                generator: {
                    // 设置图片打包后的存储目录和文件名称
                    // [hash:5] 占位符，取5位哈希值
                    // [ext] 占位符，使用文件原来的后缀名
                    filename: "imgs/[hash:5][ext]"
                }
            },
            {
                // 匹配其他资源
                test: /\.(eot|ttf|woff2?)$/,
                // 资源模块类型
                type: "asset",// 相当于使用了file-loader和url-loader
                generator: {
                    // 设置资源打包后的存储目录和文件名称
                    // [hash:5] 占位符，取5位哈希值
                    // [ext] 占位符，使用文件原来的后缀名
                    filename: "fonts/[hash:5][ext]"
                }
            },
        ]
    },

    // 4.插件
    plugins: [
        // plugins的配置
    ],

    // 5.模式
    mode: 'development' // 开发模式
}
// 以上配置相当于webpack的默认配置

